<template>
  <div class="p-4">
    <n-grid :cols="2" :x-gap="12">
      <n-grid-item>
        <n-card title="个人信息" class="hover-scale">
          <div class="flex items-start gap-4">
            <n-avatar :size="64" :src="userInfo.avatar" class="flex-shrink-0" />
            <div class="flex-1">
              <div class="text-lg font-bold mb-2">{{ userInfo.name }}</div>
              <n-descriptions :column="1" class="mb-4">
                <n-descriptions-item label="用户名">
                  {{ userInfo.username }}
                </n-descriptions-item>
                <n-descriptions-item label="角色">
                  <n-tag
                    v-for="role in userInfo.roles"
                    :key="role"
                    class="mr-2"
                    type="success"
                  >
                    {{ role }}
                  </n-tag>
                </n-descriptions-item>
              </n-descriptions>
            </div>
          </div>
        </n-card>
      </n-grid-item>

      <n-grid-item>
        <n-card title="修改密码" class="hover-scale">
          <n-form
            ref="formRef"
            :model="passwordForm"
            :rules="rules"
            label-placement="left"
            label-width="100"
            require-mark-placement="right-hanging"
          >
            <n-form-item label="原密码" path="oldPassword">
              <n-input
                v-model:value="passwordForm.oldPassword"
                type="password"
                show-password-on="click"
                placeholder="请输入原密码"
              />
            </n-form-item>
            <n-form-item label="新密码" path="newPassword">
              <n-input
                v-model:value="passwordForm.newPassword"
                type="password"
                show-password-on="click"
                placeholder="请输入新密码"
              />
            </n-form-item>
            <n-form-item label="确认密码" path="confirmPassword">
              <n-input
                v-model:value="passwordForm.confirmPassword"
                type="password"
                show-password-on="click"
                placeholder="请确认新密码"
              />
            </n-form-item>
            <div class="flex justify-end">
              <n-button type="primary" @click="handleUpdatePassword">
                更新密码
              </n-button>
            </div>
          </n-form>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { FormInst } from "naive-ui";
import { useUserStore } from "@/store/modules/user";
import { storeToRefs } from "pinia";

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const formRef = ref<FormInst | null>(null);
const message = useMessage();

const passwordForm = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const rules = {
  oldPassword: {
    required: true,
    message: "请输入原密码",
    trigger: "blur",
  },
  newPassword: {
    required: true,
    message: "请输入新密码",
    trigger: "blur",
  },
  confirmPassword: {
    required: true,
    message: "请确认新密码",
    trigger: "blur",
    validator: (rule: any, value: string) => {
      return (
        value === passwordForm.value.newPassword ||
        new Error("两次输入的密码不一致")
      );
    },
  },
};

const handleUpdatePassword = async () => {
  try {
    await formRef.value?.validate();
    message.success("密码修改成功");
    passwordForm.value = {
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  } catch (err) {
    // 表单验证失败
  }
};
</script>
